// pages/myself/feedback-zone/components/index.js
const app = getApp()
const { validate } = require('../../../../utils/validator.js')
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    customerList: [],
    isLoadMore: false,
    isNotdate: false,
    info: app.globalData.userInfo,
    type: 'news',
    keyword: '',
    page: {
      currentPage: 1,
      pageSize: 10,
      total: 0,
    },
    rules: {
      keyword: [
        { validator(rule, value, callback) {
            const reg = /^[a-zA-Z\u4e00-\u9fa5]*$/
            if (!reg.test(value)) {
              callback(new Error('姓名需为2-10位中文或英文字符'))
            } else {
              callback()
            }
          } },
      ],
    },
    swipeCheckX:0, //激活检测滑动的阈值
    swipeCheckState:0, //0未激活 1激活
    maxMoveLeft:75, //消息列表项最大左滑距离
    correctMoveLeft:75, //显示菜单时的左滑距离
    thresholdMoveLeft: 55,//左滑阈值，超过则显示菜单
    lastShowMsgId:'', //记录上次显示菜单的消息id
    moveX:0,  //记录平移距离
    showState:0, //0 未显示菜单 1显示菜单
    touchStartState:0, // 开始触摸时的状态 0 未显示菜单 1 显示菜单
    swipeDirection:0, //是否触发水平滑动 0:未触发 1:触发水平滑动 2:触发垂直滑动
  },

  /**
   * 组件的方法列表
   */
  pageLifetimes: {
    show: function() {
      // 页面被展示
      if (!this.data.isLoadMore) {
        this.setData({
          'page.currentPage': 1
        })
      }
      this.getCustomerList()
    }
  },
  created: function () {
    let userInfo = { ...app.globalData.userInfo }
    this.setData({ info: userInfo})
  },
  methods: {
    loadMore () {
      console.log('加载了更多')
      const { page, customerList } = this.data
      if (page.total > customerList.length) {
        this.setData({
          'page.currentPage': page.currentPage + 1,
          'isLoadMore': true
        })
        this.getCustomerList()
      }
      console.log(this.data.customerList)
    },
    getCustomerList: function () {
      let { page, keyword, customerList } = this.data
      const params = {
        currentPage: page.currentPage,
        pageSize: page.pageSize,
        keyword
      }
      app.api.post({
        url: 'vx_feedback_searchFeedback',
        data: params
      }).then(res => {
        let arr = []
        if (res.list.length > 0) {
          arr = res.list
          if (this.data.isLoadMore) {
            customerList.push(...arr)
          } else {
            customerList = arr
          }
          console.log(customerList)
          this.setData({
            customerList,
            isLoadMore: false,
            isNotdate: false,
            'page.total': Number(res.total)
          })
        } else {
          this.setData({
            customerList: [],
            isNotdate: true
          })
        }
      })
    },
    input: function (e) {
      console.log(e)
      this.setData({
        keyword: e.detail.value.replace(/\s+/g, ''),
        page: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        },
        customerList: []
      })
      this.getCustomerList()
      // validate('keyword', this.data.rules.keyword, e.detail.value, (valid) => {
      //   if (valid) {
      //     this.setData({
      //       keyword: e.detail.value,
      //       page: {
      //         currentPage: 1,
      //         pageSize: 10,
      //         total: 0
      //       },
      //       customerList: []
      //     })
      //     this.getCustomerList()
      //   }
      // })
  
    },
    ontouchstart: function(e) {
      if (this.data.info.roleType === 'admin-exclusive' || this.data.info.roleType === 'admin-nonExclusive' || this.data.info.roleType === 'admin-promoter' || this.data.info.roleType === 'admin-admin') {
        return
      }
      if (this.data.showState === 1) {
        this.data.touchStartState = 1;
        this.data.showState = 0;
        this.data.moveX = 0;
        this.translateXMsgItem(this.data.lastShowMsgId, 0, 200);
        this.data.lastShowMsgId = "";
        return;
      }
      this.data.firstTouchX = e.touches[0].clientX;
      this.data.firstTouchY = e.touches[0].clientY;
      if (this.data.firstTouchX > this.data.swipeCheckX) {
        this.data.swipeCheckState = 1;
      }
      this.data.lastMoveTime = e.timeStamp;
    },
    ontouchmove: function(e) {
      if (this.data.swipeCheckState === 0) {
        return;
      }
      //当开始触摸时有菜单显示时，不处理滑动操作
      if (this.data.touchStartState === 1) {
        return;
      }
      var moveX = e.touches[0].clientX - this.data.firstTouchX;
      var moveY = e.touches[0].clientY - this.data.firstTouchY;
      //已触发垂直滑动，由scroll-view处理滑动操作
      if (this.data.swipeDirection === 2) {
        return;
      }
      //未触发滑动方向
      if (this.data.swipeDirection === 0) {
        console.log(Math.abs(moveY));
        //触发垂直操作
        if (Math.abs(moveY) > 4) {
          this.data.swipeDirection = 2;
  
          return;
        }
        //触发水平操作
        if (Math.abs(moveX) > 4) {
          this.data.swipeDirection = 1;
          this.setData({scrollY:false});
        }
        else {
          return;
        }
          
      }
      //禁用垂直滚动
      // if (this.data.scrollY) {
      //   this.setData({scrollY:false});
      // }
  
      this.data.lastMoveTime = e.timeStamp;
      //处理边界情况
      if (moveX > 0) {
        moveX = 0;
      }
      //检测最大左滑距离
      if (moveX < -this.data.maxMoveLeft) {
        moveX = -this.data.maxMoveLeft;
      }
      this.data.moveX = moveX;
      this.translateXMsgItem(e.currentTarget.id, moveX, 0);
    },
    ontouchend: function(e) {
      this.data.swipeCheckState = 0;
      var swipeDirection = this.data.swipeDirection;
      this.data.swipeDirection = 0;
      if (this.data.touchStartState === 1) {
        this.data.touchStartState = 0;
        this.setData({scrollY:true});
        return;
      } 
      //垂直滚动，忽略
      if (swipeDirection !== 1) {
        return;
      }
      if (this.data.moveX === 0) {
        this.data.showState = 0;
        //不显示菜单状态下,激活垂直滚动
        this.setData({scrollY:true});
        return;
      }
      if (this.data.moveX === this.data.correctMoveLeft) {
        this.data.showState = 1;
        this.data.lastShowMsgId = e.currentTarget.id;
        return;
      }  
      if (this.data.moveX < -this.data.thresholdMoveLeft) {
        this.data.moveX = -this.data.correctMoveLeft;
        this.data.showState = 1;
        this.data.lastShowMsgId = e.currentTarget.id;
      }
      else {
        this.data.moveX = 0;
        this.data.showState = 0;
        //不显示菜单,激活垂直滚动
        this.setData({scrollY:true});
      }
      this.translateXMsgItem(e.currentTarget.id, this.data.moveX, 500);
      //this.translateXMsgItem(e.currentTarget.id, 0, 0);
    },
    onDeleteMsgTap: function(e) {
      console.log(e)
      this.deleteMsgItem(e);
    },
    deleteMsgItem: function(e) {
      var animation = wx.createAnimation({duration:200});
      animation.height(0).opacity(0).step();
      this.animationMsgWrapItem(e.currentTarget.id, animation);
      var s = this;
      setTimeout(function() {
        var id = e.currentTarget.id
        console.log(id)
        app.api.post({
          url: 'vx_feedback_deleteFeedback',
          data: {feedbackId: id}
        }).then(res => {
          s.setData({
            page: {
              currentPage: 1,
              pageSize: 10,
              total: 0
            },
            customerList: []
          })
          s.getCustomerList()
        })
        }, 200);
      this.data.showState = 0;
      this.setData({scrollY:true});
    },
    translateXMsgItem: function(id, x, duration) {
      var animation = wx.createAnimation({duration:duration});
      animation.translateX(x).step();
      this.animationMsgItem(id, animation);
    },
    animationMsgItem: function(id, animation) {
      var index = this.getItemIndex(id);
      var param = {};
      var indexString = 'customerList[' + index + '].animation';
      param[indexString] = animation.export();
      this.setData(param);
    },
    animationMsgWrapItem: function(id, animation) {
      var index = this.getItemIndex(id);
      var param = {};
      var indexString = 'customerList[' + index + '].wrapAnimation';
      param[indexString] = animation.export();
      this.setData(param);
    },
    getItemIndex: function(id) {
      var msgList = this.data.customerList;
      console.log(msgList)
      for (var i = 0; i < msgList.length; i++) {
        if (msgList[i].id === id) {
          return i;
        }
      }
      return -1;
    },
    goToDetail (e) {
      const { id } = e.currentTarget.dataset.item
      wx.navigateTo({
        url: `/myself/pages/feedback-detail/feedbackDetail?id=${id}`
      })
    },
  },
})
